<template>
    <el-dialog width="26vw" class="flex-dialog" v-model="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">批量操作</div>
        </template>
        <el-form ref="myForm" class="flex-form" :model="form" label-position="top">
            <el-form-item label="位置" prop="attrId">
                <FlexSelect :payload="attrList" :data="attrOpt" :form="form" />
            </el-form-item>
            <el-form-item label="分组" prop="groupId">
                <FlexSelect :payload="groupList" :data="groupOpt" :form="form" />
            </el-form-item>
            <el-form-item label="是否需要扫码开始检查" prop="needScan">
                <FlexSwitch :data="{ paramKey:'needScan' }" :form="form" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, onUnmounted } from 'vue';
    import { getGroupList } from '@/api/group.js';
    import { batchSetting } from '@/api/object.js';
    import { ElMessage } from 'element-plus';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexSwitch from '@/components/FlexSwitch.vue';
    const props = defineProps({
        info:{ type:Object },
        attrList:{ type:Array },
        rows:{ type:Array }
    });
    const groupList = ref([]);
    const groupTotal = ref(0);
    const attrOpt = { paramKey:'attrId', fullWidth:true, labelKey:'attrId', labelName:'attrName' };
    const groupOpt = { paramKey:'groupId', fullWidth:true, labelName:'groupName', labelKey:'groupId', total:groupTotal.value };
    
    const emit = defineEmits(['update:info', 'refresh']);
    const myForm = ref(null);
    const form = reactive({
        attrId:'',
        groupId:'',
        needScan:false
    });
    
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = key === 'needScan' ? false : ''
        })
        myForm.value.resetFields();
        props.info.visible = false;
    }
    function handleSubmit(){
        if ( props.rows.length ) {
            const params = { attrId:form.attrId, groupId:form.groupId, needScan:form.needScan ? 1 : 0, targetIds:props.rows.map(i=>i.targetId) };
            batchSetting(params)
            .then(res=>{
                if ( res.data.code === 200 ) {
                    ElMessage({
                        type:'success',
                        message:'批量设置巡检对象成功'
                    });
                    handleClose();
                    emit('refresh');
                }
            })
        } else {
            ElMessage({
                type:'info',
                message:'请勾选要设置的巡检对象'
            })
        }   
    }
    const fetchGroupList = (params)=>{
		// 实际的axios请求;
		params = params || { page:1, pageSize:10 };
		getGroupList(params)
		.then(res=>{
			if ( res.data.code === 200 ){
				groupList.value = res.data.data;
				groupTotal.value = res.data.total;
			}
		})
	}
    watch(()=>props.info, ()=>{
        if ( props.info.visible ) {
            fetchGroupList();
        }
    })
</script>
